<template>
  <div class="category">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>分类管理</span>
      </div>

      <p class="title">乐居分类:</p>
      <div class="card-list">
        <el-card
          v-for="item in mainCategory"
          :key="item.id"
          class="card-item"
          shadow="hover"
        >
          <div slot="header">
            <span>{{ item.name }}</span>
          </div>
          <div class="upload-holder">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :on-success="
                (res) => {
                  return uploadSuccess(res, item)
                }
              "
              :limit="1"
              :show-file-list="false"
            >
              <img v-if="item.icon" :src="item.icon" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-card>
      </div>
      <p class="title">全部分类:</p>
      <div class="table-holder">
        <el-table
          :data="showList"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            prop="name"
            label="菜单名称"
            width="180"
          />
          <el-table-column label="icon" width="200">
            <template slot-scope="scope">
              <img class="table-image" :src="scope.row.icon" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="分类名称" width="100" />
          <el-table-column prop="sort" label="排序" width="100" />
          <el-table-column label="显示状态" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.showStatus===0">不显示</span>
              <span v-if="scope.row.showStatus===1">显示</span>
            </template>
          </el-table-column>
          <el-table-column label="导航栏展示" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.navStatus===0">不展示</span>
              <span v-if="scope.row.navStatus===1">展示</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            width="200"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  requestCategoryList,
  updateCategory
} from '@/api/product'
import mixin from '@/mixins/index'
export default {
  mixins: [mixin],
  data() {
    return {
      catelist: []
    }
  },
  computed: {
    // 获取主分类数据
    mainCategory() {
      let list = []
      for (const val of this.catelist) {
        if (val.category.id === '1308336521604599809') {
          list = val.children
        }
      }
      return list
    },
    showList() {
      const list = []
      this.catelist.forEach(val => {
        list.push({ ...val.category, children: val.children })
      })
      console.log(list)
      return list
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 上传图片成功的钩子
    uploadSuccess(res, item) {
      console.log(res, item)
      if (res.code === 20000) {
        item.icon = res.data.fileUrl
        updateCategory(item).then((res) => {
          if (res.code === 20000) {
            this.$message({
              message: '更新图片成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '更新图片失败',
              type: 'error'
            })
          }
        })
      }
    },
    // 获取分类列表
    getData() {
      requestCategoryList().then((res) => {
        this.catelist = res.data.items
        console.log(this.catelist)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.category {
  .title {
    font-weight: 700;
  }

  .table-image {
    width: 100px;
    height: 100px;
  }

  .card-list {
    display: flex;
    justify-content: space-between;

    .card-item {
      width: 25%;
      margin: 10px;
      height: 401px;
      img {
        width: 240px;
        height: 300px;
      }
    }

    .card-item:nth-child(4n + 1) {
      margin-left: 0px;
    }
  }
}
</style>
